<!DOCTYPE html><!--用户列表-->
<html lang="en" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/amazingHeader::amazing_header('用户列表')">

</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>

</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-inline layui-show-xs-block">
                        <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                               class="layui-input" id="selName">
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn"  lay-filter="sreach"><i
                                class="layui-icon" onclick="search()">&#xe615;</i></button>
                    </div>
                    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                       onclick="location.reload()" title="刷新">
                        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除
                    </button>
                    <button class="layui-btn" onclick="xadmin.open('添加用户','register?role=1')"><i
                            class="layui-icon"></i>添加管理员
                    </button>
                    <button class="layui-btn" onclick="xadmin.open('添加用户','register')"><i
                            class="layui-icon"></i>添加用户
                    </button>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <form>
                        <table class="layui-table layui-form">
                            <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
                                </th>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>性别</th>
                                <th>角色</th>
                                <th>手机</th>
                                <th>邮箱</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">

                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="layui-card-body " style="text-align: center">
                    <div class="page">
                        <div id="page">

                        </div>
                    </div>
                    <div style="margin-top: 5px">
                        共有<span id="total"></span>条数据，每页显示
                        <label for="pageSize">
                            <select id="pageSize" class="layui-select" onchange="page(1)">
                                <option>4</option>
                                <option selected="selected">5</option>
                                <option>6</option>
                            </select>
                        </label>
                        条
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function page(nowPage) {
        $.ajax({
            type: "get",
            url: "user/listUser",
            data: {
                size: $("#pageSize").val(),
                num: nowPage,
                name: $("#selName").val()
            },
            beforeSend: function () {
                lading = layer.msg('处理中', {icon: 16});
            },
            success: function (result) {
                layer.close(lading);
                let total = $("#total");
                total.text(result.data.total);
                const tbody = $('#tbody');
                tbody.empty();//添加前先清空原有表格  防止套娃！！！
                const arr = result.data.list;
                //填充表格
                for (let i = 0; i < arr.length; i++) {
                    let tr = '<tr>';
                    tr += "<td>\n" +
                        "<input type='checkbox' name='id' value='" + arr[i].id + "' lay-skin='primary'> \n" +
                        "</td>";
                    tr += '<td>' + arr[i].id + '</td>';
                    tr += '<td>' + arr[i].username + '</td>';
                    tr += '<td>' + arr[i].sex + '</td><td>';
                    tr += arr[i].role === 0 ? '会员' : '管理员';
                    tr += '</td><td>' + arr[i].phone + '</td>';
                    tr += '<td>' + arr[i].email + '</td>';
                    tr += '<td>' + arr[i].createTime + '</td>';
                    tr += '<td>' + arr[i].updateTime + '</td>';
                    tr += "<td><a title=\"编辑\"  onclick=\"xadmin.open('编辑','manageUserDetail?id="+ arr[i].id +"')\" href=\"javascript:;\">\n" +
                        " <i class=\"layui-icon\">&#xe642;</i>\n" +
                        "</a>";
                    tr += "<a title='删除' onclick='member_del(this," + arr[i].id + ")' >\n" +
                        "<i class=\"layui-icon\">&#xe640;</i>\n" +
                        "</a></td>";
                    tr += '</tr>';
                    tbody.append(tr);
                }

                //添加 分页条
                const page = $("#page");
                const allPage = result.data.navigateLastPage;//总页数
                page.empty();

                if (nowPage <= 1) {//如果减后 nowPage值不合法 将链接设为红色 且去掉点击事件
                    page.append("<a class='prev' style='color: red'>&lt;&lt;</a>");
                } else {
                    page.append("<a class='prev' onclick=page(" + (nowPage - 1) + ")>&lt;&lt;</a>");
                }
                for (let i = 1; i <= allPage; i++) {
                    if (i === nowPage) {
                        page.append(" <span class='current'>" + i + "</span>");
                    } else {
                        page.append("<a class='num' onclick='page(" + i + ")'>" + i + "</a>");
                    }
                }
                if (nowPage === allPage) {//如果nowPage已经等于最大值  将连接设为红色 且去掉点击事件
                    page.append("<a style='color: red' class='prev' id='a' >&gt;&gt;</a>");
                } else {
                    page.append("<a class='prev' id='a' onclick=page(" + (nowPage + 1) + ")>&gt;&gt;</a>");
                }
                const form = layui.form;
                form.render('checkbox');
            }
        })
    }

    page(1);//进入页面先载入第一页

    /*
    模糊查找用户
     */
    function search() {
        const name = $("#selName").val();
        // if (name == null || name.length === 0) {
        //     layer.msg("请输入您要搜索的用户名", {time: 1500, icon: 5, shift: 6}, function () {
        //     });
        //     return false;
        // }
        page(1);
    }
</script>
<script>
    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        var form = layui.form;

        // 监听全选
        form.on('checkbox(checkall)', function (data) {

            if (data.elem.checked) {
                $('tbody input').prop('checked', true);
            } else {
                $('tbody input').prop('checked', false);
            }
            form.render('checkbox');
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });

    /*用户-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {

            if ($(obj).attr('title') == '启用') {
                //发异步把用户状态进行更改
                $(obj).attr('title', '停用')
                $(obj).find('i').html('&#xe62f;');
                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!', {icon: 5, time: 1000});
            } else {
                $(obj).attr('title', '启用')
                $(obj).find('i').html('&#xe601;');
                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!', {icon: 5, time: 1000});
            }

        });
    }

    /*用户-删除*/
    function member_del(obj, id) {
        const arr = [];
        // if (Array.isArray(id)) {
        //     // for (let i in id) {
        //     //     arr.push(id[i]);
        //     // }
        //     for (let i = 0; i < id.length; i++) {
        //         arr.push(id[i]);
        //     }
        // } else {
        //     arr.push(id);
        // }
        arr.push(id);
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            del(arr);
            page(1);
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }

    /**
     * 给一个数组 格式化为json格式后给后台
     * @param arr
     */
    function del(arr) {
        $.ajax({
            type: "DELETE",
            url: "/user/user",
            data: JSON.stringify(arr),
            contentType: 'application/json',
            dataType: "json",
            beforeSend: function () {
                loading = layer.msg('处理中', {icon: 16});
            },
            success: function (result) {
                layer.close(loading);
                if(result.status===0){
                    layer.msg(result.msg,{time:1500,icon:5,shift:6});
                }
            }
        });
    }

    /*删除选中的所有数据*/
    function delAll(argument) {
        const ids = [];

        // 获取选中的id
        $('tbody input').each(function (index, el) {
            if ($(this).prop('checked')) {
                ids.push($(this).val())
            }
        });

        layer.confirm('确认要删除吗？' + ids.toString(), function (index) {
            //捉到所有被选中的，发异步进行删除
            del(ids);
            member_del(null, ids);
            layer.msg('删除成功', {icon: 1});
            page(1);
        });
    }
</script>